<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>素材库</title>
    <link rel="stylesheet" href="../assets/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../assets/style/admin.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <script src="../assets/layui/layui.js"></script>
    <script src="../assets/js/common.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="../common/header.js"></script>
    <!-- 内容主体区域 -->
    <div id="LAY_app_body">
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            素材库
                            <a href="add.html" class="layui-btn layui-btn-sm">添加</a>
                        </div>
                        <div class="layui-card-body">
                            <div class="layui-row layui-hide">
                                <select id="status" style="position: relative;float: right;" onchange="reloadList()">
                                    <option value="1">启用的</option>
                                    <option value="0">禁用的</option>
                                    <option value="-1">全部</option>
                                </select>&nbsp;&nbsp;
                            </div>
                            <!--                        <div class="layui-side layui-side-menu" style="height:100%;">-->
                            <div style="width: 200px;float: left; padding: 10px 0 0 0;">
                                <!--                            <div class="layui-side-scroll">-->
                                <ul class="layui-nav layui-nav-tree" lay-filter="wechat-list" style="height:100%;">
                                    <li class="layui-nav-item layui-nav-itemed" style="height:100%;">
                                        <h5>&nbsp;素材分组 &nbsp;<button onclick="importLayer();"
                                                                     class="layui-btn layui-btn-sm"><i
                                                class="layui-icon layui-icon-add-1"></i></button>
                                        </h5>
                                        <dl class="layui-nav-child"
                                            style="height:400px;overflow: hidden;overflow-y:auto; ">
                                            <dd><a onclick="test(0);" style="color: red">未分组（0）</a></dd>
                                        </dl>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <table id="LAY-material-manage" lay-filter="LAY-material-manage"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var uploading = false;
        var reloadListm;
        var importLayer;
        layui.use('table', function () {
            var $ = layui.$
                , table = layui.table
                , form = layui.form;

            var status = $('#status').find("option:selected").val();
            test = function (group_id) {
                table.render({
                    elem: '#LAY-material-manage'
//            ,height: 315
                    , url: '/material/list_data/' + group_id //数据接口
                    , where: {//设定异步数据接口的额外参数
                        status: status
                    }
                    , page: true //开启分页
                    , cols: [[ //表头
//                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                        {field: 'type', title: '类型', width: 100, templet: '#typeTpl', fixed: 'left'}
                        , {field: 'title', title: '标题', width: 200}
                        , {field: 'name', title: '组', width: 100, templet: '#nameTpl'}
                        , {field: 'created', title: '添加时间', width: 170}
                        , {field: 'status', title: '状态', sort: true, width: 110, templet: '#statusTpl', hide: true}
                        , {fixed: 'right', width: 100, align: 'center', toolbar: '#barDemo', width: 150}
                    ]]
                    , title: '列表'
//            ,toolbar: '#toolbarDemo'
//            ,defaultToolbar: ['filter']
                });
            };

            //监听工具条
            table.on('tool(LAY-material-manage)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if (layEvent === 'detail') { //查看
                    //do somehing
                } else if (layEvent === 'del') { //删除
                    layer.confirm('确认要删除吗？', function (index) {
                        $.ajax({
                            type: "GET",
                            url: "/material/delete/" + data.id,
                            success: function (response) {
                                var dataObj = $.parseJSON(response);
                                if (dataObj.code == 0) {
                                    layer.msg(dataObj.msg, {icon: 1});
                                    var targetUrl = '/material/index';
                                    if (data.material_group_id && data.material_group_id != '') {
                                        targetUrl = '/material/index/' + data.material_group_id;
                                    }
                                    setTimeout(function () {
                                        location.href = targetUrl;
                                    }, 1000);
                                } else {
                                    layer.msg(dataObj.msg, {icon: 5});
                                }
                            },
                            error: function (request, status, error) {

                            }
                        });
                        layer.close(index);
                    });
                } else if (layEvent === 'edit') { //编辑
                    //do something
                }
            });
            test(0);

            //监听状态操作
            form.on('switch(processStatusDemo)', function (obj) {
                var process_status = 2;
                if (obj.elem.checked) {
                    process_status = 1;
                }
                var id = this.step;
                var post = {
                    id: id,
                    process_status: process_status
                };
                $.ajax({
                    type: "POST",
                    url: "/material/changeProcessStatus",
                    data: post,
                    success: function (response) {
                        var dataObj = $.parseJSON(response);
                        if (dataObj.code == 0) {
                            layer.tips('修改成功', obj.othis);
                        } else if (dataObj.code == -1) {
                            layer.tips(dataObj.msg, obj.othis);
                        } else {
                            layer.msg(dataObj.msg, {icon: 5});
                        }

                        setTimeout(function () {
                            reloadList();
                        }, 1000);
                    },
                    error: function (request, status, error) {

                    }
                });
                return false;
            });

            importLayer = function () {
                var board_html = tpl_import.innerHTML;
                layer.open({
                    type: 1,
                    area: '600px',
                    title: '添加组',
                    closeBtn: 0,
                    shadeClose: true,
                    content: board_html,
                    btn: ['提交', '取消'],
                    success: function (layero, index) {
                        form.render();
                    },
                    yes: function (index, layero) {
                        var data = new FormData($('#uploadForm')[0]);
                        var group_nameObj = layero.find('input[name=group_name]');
                        var group_name = group_nameObj.val();
                        if (group_name == '') {
                            layer.msg("请输入组名", {icon: 5});
                            return false;
                        }

                        var statusObj = layero.find('select[name=status]');
                        var status = statusObj.val();
                        if (status == '') {
                            layer.msg("请选择状态", {icon: 5});
                            return false;
                        }

                        if (uploading) {
                            layer.msg("正在提交数据，请稍候", {icon: 5});
                            return false;
                        }
                        $.ajax({
                            type: "POST",
                            url: "/material/group_save",
                            data: data,
                            cache: false,
                            contentType: false,
                            processData: false,
                            beforeSend: function () {
                                uploading = true;
                            },
                            success: function (response) {
                                var dataObj = $.parseJSON(response);
                                if (dataObj.code === 0) {
                                    layer.msg(dataObj.msg, {icon: 6});
                                    layer.close(index);
                                    var targetUrl = '/material/index';
                                    setTimeout(function () {
                                        reloadList();
                                        location.href = targetUrl;
                                    }, 1000);
                                } else {
                                    layer.msg(dataObj.msg, {icon: 5});
                                }
                                uploading = false;
                            },
                            error: function (request, status, error) {
                                layer.msg('哦噢，网络开小差了', {icon: 5});
                                uploading = false;
                            }
                        });
                    }
                    , btn2: function (index, layero) {
                        setTimeout(function () {
                            reloadList();
                        }, 1000);
                    }
                });
            };

            reloadList = function () {
                var status = $('#status').find("option:selected").val();
                table.reload('LAY-material-manage', {
                    where: { //设定异步数据接口的额外参数，任意设
                        status: status
                    }
                });
            };
        });

    </script>
    <script type="text/html" id="typeTpl">
        {{# if(d.type == 1){ }}
        文字
        {{# } else if(d.type == 2){ }}
        语音
        {{# } else if(d.type == 3){ }}
        图片
        {{# } else if(d.type == 4){ }}
        文件
        {{# } else if(d.type == 5){ }}
        视频
        {{# } else if(d.type == 6){ }}
        动图
        {{# } }}
    </script>
    <script type="text/html" id="barDemo">
        {{# if(d.process_status!=1){ }}
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit" href="/material/edit/{{d.id}}"
           target="_blank"><i class="layui-icon layui-icon-edit"></i>编辑</a>
        <button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="del">删除</button>
        {{# }else if(d.process_status==1){ }}
        请暂停再编辑
        {{# } }}
    </script>
    <script type="text/html" id="statusTpl">
        {{# if(d.status==1){ }}
        <span style="color: green;">启用</span>
        {{# }else if(d.status==0){ }}
        <span style="color: #CC0000;">禁用</span>
        {{# } }}
    </script>
    <script type="text/html" id="nameTpl">
        {{# if(d.name == null){ }}
        <span style="color: #CC0000;">未分组</span>
        {{# }else { }}
        {{d.name}}
        {{# } }}
    </script>
    <script id="tpl_import" type="text/html">
        <form id="uploadForm" class="layui-form" action="" enctype="multipart/form-data">
            <div class="layui-row"
                 style="padding: 5px;height:200px;max-height: 300px;overflow: hidden;overflow-y: auto;">
                <div class="layui-form-item">
                    <label class="layui-form-label">组名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="group_name" autocomplete="off" placeholder="请输入组名" class="layui-input"
                               value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select name="status">
                            <option value="">请选择</option>
                            <option value="1" selected>启用</option>
                            <option value="0">禁用</option>
                        </select>
                    </div>
                </div>
            </div>
        </form>
    </script>
</div>
</body>
</html>
